
<template>
  <div class="box">
    <div class="ant-page-header">
      <div class="ant-page-header-heading-left">
        <span
          class="ant-page-header-heading-title"
          title="通知公告"
        >通知公告
        </span>
        <span class="ant-page-header-heading-sub-title" title="用于管理各小区的通知公告、公共的通告公告">用于管理各小区的通知公告、公共的通告公告</span>
      </div>
    </div>
    <!--筛选表单-->
    <div class="filter-form">
      <el-form ref="form" label-position="top" label-width="100px" :inline="true" size="small">
        <el-form-item prop="community_code" label-width="100px" label="小区名称">
          <select-community v-model="queryData.community_code" />
        </el-form-item>
        <el-form-item prop="title" label="标题">
          <el-input v-model="queryData.title" placeholder="请输入" />
        </el-form-item>
        <el-form-item prop="type" label="类型" label-width="100px">
          <el-select v-model="queryData.type" clearable placeholder="请选择">
            <el-option value="1" label="通知" />
            <el-option value="2" label="公告" />
          </el-select>
        </el-form-item>
        <el-form-item prop="status" label="状态" label-width="100px">
          <el-select v-model="queryData.status" clearable placeholder="请选择">
            <el-option value="0" label="禁用" />
            <el-option value="1" label="启用" />
          </el-select>
        </el-form-item>
        <el-form-item class="filterBtn">
          <el-button size="middle" @click="onReset">重置</el-button>
          <el-button size="middle" type="primary" @click="onFilter">查询</el-button>
        </el-form-item>
      </el-form>
    </div>
    <!-- 整个表单 -->
    <div class="form">
      <!-- 新增一行 -->
      <div class="ant-pro-table-list-toolbar">
        <div class="ant-pro-table-list-toolbar-container">
          <el-button type="primary" style="height:38px" @click="dialogShow = true">新增通知公告</el-button>
          <i class="el-icon-refresh-right" />
          <i class="el-icon-upload2" />
          <i class="el-icon-setting" />
        </div>

      </div>
      <!-- 表单 -->
      <el-table
        :header-cell-style="{background:'#fafafa', color:'#252525'}"
        :data="list"
        style="width: 100%"
      >
        <el-table-column
          prop="id"
          label="ID"
          width="100"
        />
        <el-table-column
          prop="community.name"
          label="小区名称"
          width="180"
        />
        <el-table-column
          prop="title"
          label="标题"
          width="120"
        />
        <el-table-column
          prop="pic_url"
          label="图片内容"
          width="120"
        >
          <template slot-scope="{row}">
            <!-- {{ 'http://124.223.14.236:8881'+ row.pic_url }} -->
            <el-image
              :preview-src-list="['http://124.223.14.236:8881'+
                row.pic_url]"
              :src="'http://124.223.14.236:8881'+ row.pic_url"
              width="100px"
              alt=""
            /></template>
        </el-table-column>
        <el-table-column
          prop="type"
          label="类型"
          width="180"
        >
          <template slot-scope="scope">
            {{ scope.row.type === 1 ? '通知' : '公告' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="status"
          label="状态"
          width="150"
        >
          <template slot-scope="scope">
            {{ scope.row.status === 1 ? '启用' : '禁用' }}
          </template>
        </el-table-column>
        <el-table-column
          prop="sort"
          label="权重"
          width="180"
        />
        <el-table-column
          label="操作"
        >
          <template slot-scope="{row}">
            <el-button
              type="text"
              @click="editRow(row.id)"
            >编辑</el-button>
          &nbsp;&nbsp;
            <el-button
              type="text"
              @click="delRow(row.id)"
            >删除</el-button>
          </template>
        </el-table-column>
      </el-table>
      <!-- 分页器 -->
      <div class="page">
        <el-pagination
          :current-page.sync="queryData.current"
          :page-sizes="[10, 20 , 30, 40]"
          :page-size="queryData.pageSize"
          layout="total, sizes, prev, pager, next, jumper"
          :total="total"
          background
          @size-change="sizeChange"
          @current-change="currentChange"
        />
      </div>
      <!-- 新增弹窗 -->
      <el-drawer
        :title="`${title}通知公告`"
        :visible.sync="dialogShow"
        :with-header="true"
        size="50%"
        @close="onClose"
      >
        <el-form ref="form" :model="formData" :rules="formRules" label-position="top" class="drawerForm" label-width="150px" :inline="true" size="small">
          <!-- 小区 和 启用状态 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label="所属小区" prop="community_code" label-width="150px">
                <select-community v-model="formData.community_code" style="width: 300px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="status" label="启用状态" label-width="150px">
                <el-radio-group v-model="formData.status" style="width: 300px">
                  <el-radio :label="0">禁用</el-radio>
                  <el-radio :label="1">启用</el-radio>
                </el-radio-group>
              </el-form-item>
            </el-col>

          </el-row>
          <!-- 标题  排序大小 -->
          <el-row>
            <el-col :span="12">
              <el-form-item prop="title" label="标题">
                <el-input v-model="formData.title" placeholder="请输入" style="width:300px" />
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="sort" label="排序大小">
                <el-input-number v-model="formData.sort" controls-position="right" :min="1" :max="10" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 类型  图片封面 -->
          <el-row>
            <el-col :span="12">
              <el-form-item label-width="150px" label="类型">
                <el-select v-model="formData.type" clearable placeholder="请选择" style="width:300px">
                  <el-option label="通知" :value="1" />
                  <el-option label="公告" :value="2" />
                </el-select>
              </el-form-item>
            </el-col>
            <el-col :span="12">
              <el-form-item prop="pic_url" label-width="100px" label="图片封面">
                <upload-image v-model="formData.pic_url" />
              </el-form-item>
            </el-col>
          </el-row>
          <!-- 公告内容 富文本-->
          <el-form-item prop="content" label="文章内容" label-width="150px">
            <quill-editor v-model="formData.content" class="article" />
          </el-form-item>
        </el-form>
        <el-row type="flex" justify="center">
          <el-button type="primary" @click="onSubmit">提交</el-button>
          <el-button @click="dialogShow = false">取消</el-button>
        </el-row>
      </el-drawer>
    </div>
  </div>

</template>

<script>
import { quillEditor } from 'vue-quill-editor'

import 'quill/dist/quill.core.css'
import 'quill/dist/quill.snow.css'
import 'quill/dist/quill.bubble.css'
import selectCommunity from './components/selectCommunity.vue'
import { getnoticeListApi, getnoticeInfoApi, editnoticeApi, addnoticeApi, delnoticeApi } from '@/api/bjd/notice'
import UploadImage from './components/upload-image.vue'
export default {
  name: 'NoticePage',
  components: {
    quillEditor,
    UploadImage,
    selectCommunity
  },
  data() {
    return {
      list: [],

      queryData: {
        community_code: '',
        title: '',
        type: '',
        status: '',
        current: 1,
        pageSize: 10
      },
      total: 0,
      dialogShow: false,
      // 弹出层
      formData: {
        community_code: '',
        type: 1,
        title: '',
        sort: 10,
        remark: '',
        status: 1,
        pic_url: '',
        content: ''
      },
      formRules: {
        community_code: [{ required: true, message: '请选择所属小区', trigger: 'change' }],
        title: [{
          required: true,
          message: '请输入标题',
          trigger: 'blur'
        }],
        content: [{
          required: true,
          message: '请输入公共内容',
          trigger: 'blur'
        }]
      }
    }
  },
  computed: {
    title() {
      return this.formData.id ? '修改' : '添加'
    }
  },
  created() {
    this.initData()
  },
  methods: {
    // 渲染页面
    async initData() {
      const res = await getnoticeListApi(this.queryData)
      // console.log(res)
      this.list = res.data.rows
      this.total = res.data.count
    },
    // ================分页=======================
    // 每页数量切换
    sizeChange(val) {
      // console.log(val) // 最新的页码
      this.queryData.pageSize = val
      this.initData()
    },
    // 页码切换事件
    currentChange(val) {
      // console.log(val) // 最新的页面
      this.queryData.current = val
      this.initData()
    },
    // =================筛选========================
    // 提交功能
    onFilter() {
      // 页码变成1
      this.queryData.current = 1
      // 重新拉去数据
      this.initData()
    },
    // 重置功能
    onReset() {
      // 筛选条件重置
      this.queryData = {
        community_code: '',
        title: '',
        type: '',
        status: '',
        current: 1,
        pageSize: 10
      }
      // 重新拉去数据
      this.initData()
    },
    // =============================================
    // 提交行为
    async onSubmit() {
      // 表单的校验
      await this.$refs.form.validate()
      // 加工处理表单数据(拷贝一份再加工)
      // 请求的发生
      this.formData.id
        ? await editnoticeApi(this.formData)
        : await addnoticeApi(this.formData)
      // 提示效果
      this.$message.success(this.formData.id ? '修改成功' : '添加成功')
      // 关闭弹框
      this.dialogShow = false
      // 列表更新
      this.initData()
    },
    // 弹框关闭
    onClose() {
      // 表单重置
      this.formData = {
        ccommunity_code: '',
        type: 1,
        title: '',
        sort: 10,
        remark: '',
        status: 1,
        pic_url: '',
        content: ''
      }
      // 移除校验
      this.$refs.form.clearValidate()
    },
    // 修改回显
    async editRow(id) {
      const res = await getnoticeInfoApi(id)
      // 赋给变量
      this.formData = res.data
      // t弹窗打开
      this.dialogShow = true
    },
    // 删
    async delRow(id) {
      this.$confirm('确认删除吗?', '提示').then(async() => {
        await delnoticeApi(id)
        if (this.list.length === 1 && this.formData.page > 1) this.formData.page--
        this.$message.success('删除成功')
        this.initData()
      }).catch(() => {
        this.$message.info('已取消')
      })
    }
  }

}
</script>

<style lang="scss" scoped>

.box{
  background-color: #fafbfc;
}
.ant-page-header {
    box-sizing: border-box;
    margin: 3% 4% 0;
    color: #000000d9;
    font-size: 14px;
    font-variant: tabular-nums;
    line-height: 1.5715;
    list-style: none;
    font-feature-settings: "tnum","tnum";
    position: relative;
    padding: 16px 24px;
}
.ant-page-header .ant-page-header-heading-left {
    display: flex;
    align-items: center;
    margin-block: 4px;
    margin-inline-end: 0;
    margin-inline-start: 0;
    overflow: hidden;
}
.ant-page-header .ant-page-header-heading-title {
    margin-inline-end: 12px;
    margin-block-end: 0;
    color: rgba(0, 0, 0, 0.88);
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ant-page-header.ant-page-header-heading-title {
      margin-inline-end: 12px;
    margin-block-end: 0;
    color: rgba(0, 0, 0, 0.88);
    font-weight: 600;
    font-size: 20px;
    line-height: 32px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.ant-pro-table-list-toolbar {
    line-height: 1;
    float: right;

}
.ant-pro-table-list-toolbar-container {
    display: flex;
    justify-content: space-between;
    padding-block: 16px;
    padding-inline: 0;

}
i{
  margin:9px 13px ;
  font-size:22px
}
.form{
  margin: 0  5%;
  background-color: #fff;
  padding: 0 2%;
}
.filter-form{
   margin: 0  5% 1%;
   padding: 1% 1%;
   background-color: #fff;
}
.filterBtn{
  float: right;
  padding-top: 22px;
}
.drawerForm{
  padding:0 5%;
}
</style>
